/**
 * 菜单 & 头部
 * @param menu 左侧菜单
 * @constructor
 */
var MenuHeader = function (menu) {

    return new Vue({
        el: '#app',
        data: {
            loadOver: false, // 是否加载完毕
            collapse: false, // 是否关闭菜单
            userInfo: {}, // 用户信息
            menuSetting: {
                actColor: '#409EFF', // 活动字体颜色
                actSdColor: '#20a0ff', // 活动阴影色,
                NoActColor: '#bfcbd9', // 未活动字体颜色
            },
            topMenuList: {}, // 顶部菜单列表
            leftMenuList: {}, // 左侧菜单列表
            tabList: {}, // 选项卡列表
            activeTabIndex: null, // 当前活动标签
            indexKey: 'defaultIndex', // 首页[KEY]
            indexUrl: $w.getPageUrl('workBench'), // 首页[URL ]
            topMenuIndex: '', // 顶部菜单 当前活动
            leftMenuWidth: 200, // 左侧菜单样式
            leftMenuStyle: {}, // 左侧菜单样式
            rightClickStyle: {}, // 右击展示菜单样式
            rightClickIndex: null, // 当前右击[index]
            clearCache: {
                showClearDialog: false, // 清除缓存弹出层
                showClearLoading: false, // 清除缓存弹出层正在加载
                pageUrl: '', // 清除缓存连接
            }, // 清除缓存内容
        },
        created: function () {
            // 初始化用户
            this.initUser();
            // 初始化菜单
            this.initMenu();
            // 初始化[tab]
            this.initTab();
            // 清除缓存连接赋值
            this.clearCache.pageUrl = $w.getPageUrl('clearCache');
            var that = this;
            this.$nextTick(function () {
                that.loadOver = true;
            });
        },
        methods: {
            /**
             * 初始化某些样式
             */
            initCss: function () {
                this.$nextTick(function () {
                    // ****** 下面计算下内容高度 ******
                    // 公式：高度 - [tab]高度
                    var tabListObj = $('.tab-list');
                    var tabHeight = tabListObj.find('.el-tabs__header')[0].offsetHeight;

                    var mainHeight = $('#contentWrapper').height();

                    tabListObj.find('.el-tabs__content').css({
                        height: 'calc(' + mainHeight + 'px - ' + tabHeight + 'px)'
                    });
                });
            },
            /**
             * 初始化用户
             */
            initUser: function () {

                var that = this;

                // 获取各模块的值
                $.get($w.getApiUrl('loginInfo'), {}, function (event) {

                    // 必须先登录
                    if (parseInt(event.no) === 403) {

                        that.$message({
                            type: 'warning',
                            showClose: true,
                            message: '登陆超时，请重新登陆'
                        });

                        // 几秒之后移除
                        setTimeout(function () {

                            window.parent.location.href = $w.getPageUrl('login');
                        }, 810);
                        return false;
                    }

                    // 上传失败的返回|提示
                    if (parseInt(event.no) !== 200) {

                        that.$message({
                            showClose: true,
                            type: 'error',
                            message: event.msg
                        });

                        return false;
                    }

                    // 数据赋值
                    that.userInfo = event.data.userInfo;

                    return true;
                });
            },
            /**
             * 初始化左侧菜单
             */
            initMenu: function () {

                // 菜单[JSON]转[OBJ]
                menu = JSON.parse(menu);
                // ******* 1、先初始化顶部菜单 *******
                this.$set(this, 'topMenuList', $w.dataNoBind(menu));

                //  ******* 2、先初始化左侧菜单 *******
                if (menu[0] && menu[0]['children'].length > 0) {
                    this.$set(this, 'leftMenuList', $w.dataNoBind(menu[0]['children']));
                }

                // ******* 3、赋值当前活动菜单等信息 *******
                // 以头部的[key]获取左侧菜单列表
                var actSub = this.topMenuList[this.topMenuIndex];

                if (actSub && actSub['children']) { // 有顶部的[children]就展示顶部的[children]
                    this.leftMenuList = this.topMenuList[this.topMenuIndex]['children'];
                } else {
                    // 顶部[sub]没有就展示第一个
                    var topKeys = Object.keys(this.topMenuList);
                    // 默认顶部活动第一个
                    this.topMenuIndex = topKeys[0];
                    // 左侧菜单列表
                    this.leftMenuList = !this.topMenuList[topKeys[0]] ?
                        [] : this.topMenuList[topKeys[0]]['children'];
                }

                this.leftMenuStyle = {
                    width: this.leftMenuWidth + 'px'
                };
            },
            /**
             * 初始化选项卡的默认属性
             */
            initTab: function () {

                // 初始化已经打开标签列表
                var indexKey = this.indexKey;
                this.$set(this, 'tabList', {});
                this.tabList[indexKey] = {
                    font_icon: "",
                    label: "首页",
                    key: indexKey,
                    url: this.indexUrl
                };

                // 当前活动[tab]标签
                this.activeTabIndex = indexKey;

                var that = this;
                this.$nextTick(function () {

                    // 添加事件 - 全部[DOM]点击触发 关闭右击菜单
                    $(window).mouseup(function (e) {
                        var con = jQuery("#leftMenuWrapper");   // 设置目标区域
                        if (!con.is(e.target) && con.has(e.target).length === 0) {
                            that.hideLeftMenu();
                        }
                    });

                    // 添加事件 - [iframe]点击触发 关闭右击菜单
                    var iframe = $("iframe");
                    $(iframe.prop('contentWindow')).on('click', that.hideLeftMenu);
                    iframe.load(function () {
                        // 里面登录按钮点击
                        iframe.contents().find('#toLogin').on('click', function () {
                            window.parent.location.href = $w.getPageUrl('login');
                        });
                    });

                    // 初始化[css]
                    that.initCss();
                    // 给当前活动选项卡相邻两个选项卡增删[class]
                    that.addAdjoinTabClass();
                });
            },
            /**
             * 菜单整体 缩小按钮操作
             */
            openColMenu: function () {

                var that = this;
                var contentObj = jQuery('#contentWrapper'),
                    menuSideObj = jQuery('#menuSide');
                // 展开
                if (this.collapse === true) {

                    // 内容
                    contentObj.removeClass('animate-tab-collapse-out');
                    // 内容
                    contentObj.addClass('animate-tab-collapse-in');

                    // 菜单
                    menuSideObj.removeClass('animate-menu-collapse-close');
                    // 菜单
                    menuSideObj.addClass('animate-menu-collapse-open');

                    // 菜单 宽度
                    this.$nextTick(function () {
                        // 展开
                        that.collapse = false;
                        that.leftMenuStyle.width = 200 + 'px';
                    });
                } else {
                    // 内容
                    contentObj.removeClass('animate-tab-collapse-in');
                    // 内容
                    contentObj.addClass('animate-tab-collapse-out');

                    // 菜单
                    menuSideObj.removeClass('animate-menu-collapse-open');
                    // 菜单
                    menuSideObj.addClass('animate-menu-collapse-close');

                    // 菜单 宽度
                    this.$nextTick(function () {
                        // 收缩
                        that.collapse = true;
                        that.leftMenuStyle.width = 'auto';
                    });
                }
            },
            /**
             * 获取样式
             */
            getStyleIcon: function ($key) {

                // 如果是当前菜单的INDEX == 传输KEY
                if (this.activeTabIndex === $key) {

                    return {
                        color: this.menuSetting.actColor
                    };
                }
                return {
                    color: this.menuSetting.NoActColor
                };
            },
            /**
             * [顶部标签]点击
             */
            topTabClick: function (index) {

                // [index]长度太小
                if (index.length < 1) return false;

                this.$set(this, 'topMenuIndex', index);
            },
            /**
             * 左侧菜单 点击跳转链接
             * @param $item 选项卡条目详情
             * @returns {boolean}
             */
            leftMenuLink: function ($item) {

                // 要跳转打开连接等于 当前活动连接则不进行任何操作
                // 活动tab信息
                var actItem = this.tabList[this.activeTabIndex];
                if ($item['url'] === actItem['url']) return false;

                this.outInAnimate();

                var that = this;
                setTimeout(function () {

                    // 左侧活动菜单、当前活动[tab]赋值
                    if ($item['key']) that.$set(that, 'activeTabIndex', $item['key']);

                    // 查询选项卡列表里是没有的话得添加
                    if (!that.tabList[$item['key']]) {
                        that.addTab($item);
                    } else {

                        // 给当前活动选项卡相邻两个选项卡增删[class]
                        that.addAdjoinTabClass();
                    }
                }, 980);
            },
            /**
             * 顶部标签选项卡 增加
             * @param $item 选项卡条目详情
             */
            addTab: function ($item) {

                var that = this;

                // 当前条目存进已打开选项卡列表
                this.$set(this.tabList, $item['key'], $item);

                this.$nextTick(function () {

                    // 添加事件 - [iframe]点击触发 关闭右击菜单
                    var iframeObj = jQuery("iframe");
                    iframeObj.load(function () {
                        jQuery(iframeObj.prop('contentWindow')).on('click', function () {
                            that.hideLeftMenu();
                        });
                        iframeObj.contents().find('#toLogin').on('click', function () {
                            window.parent.location.href = $w.getPageUrl('login');
                        });
                    });

                    // 给当前活动选项卡相邻两个选项卡增删[class]
                    that.addAdjoinTabClass();
                });
            },
            /**
             * 给当前活动选项卡相邻两个选项卡增删[class]
             */
            addAdjoinTabClass: function () {
                this.$nextTick(function () {
                    // 删除[css]
                    var tabDom = $('#tabDom');
                    var itemDom = tabDom.find('.el-tabs__item');
                    itemDom.removeClass('active-prev');
                    itemDom.removeClass('active-next');
                    var tabActiveDom = tabDom.find('.is-active');

                    // 当前打开标签的上一个赋值[css]
                    tabActiveDom.prev().addClass('active-prev');
                    // 当前打开标签的下一个赋值[css]
                    tabActiveDom.next().addClass('active-next');
                });
            },
            /**
             * 打开除[当前选项卡]外其他选项卡
             * @param $doIndex 操作[key]|值空则当前活动标签[key]作为操作[key]
             * @returns {string}
             */
            openOtherTab: function ($doIndex) {

                $doIndex = $doIndex || this.activeTabIndex;

                var noStageData = $w.dataNoBind(this.tabList);
                var arrayNext = $w.array_next_val($doIndex, noStageData);

                // 判断如果当前活动的[index]不存在 [tab]列表中，则[tabs]中最后一个打开
                if (!arrayNext) {

                    // 当前活动[TAB] - 最后一个
                    this.$set(this, 'activeTabIndex', null);
                    var stage = $w.array_end(noStageData)['key'];
                    this.$set(this, 'activeTabIndex', stage);
                    return true;
                }

                this.$set(this, 'activeTabIndex', null);
                this.$set(this, 'activeTabIndex', arrayNext['key']);
            },
            /**
             * 关闭选项卡菜单
             * @param $key
             */
            closeTab: function ($key) {

                // 判断下 如果要关闭的是Index 则不关闭
                var doItem = this.tabList[$key];
                if (doItem && doItem['key'] === this.indexKey) {
                    // 消息
                    return this.$message({
                        showClose: true,
                        type: 'warning',
                        message: '首页是无法关闭哦~≡ω≡'
                    });
                }

                // 删除 = 关闭
                this.$delete(this.tabList, $key);

                // 当前活动[$key]是要关闭的[$key] - 去执行打开其他标签
                if ($key === this.activeTabIndex) this.openOtherTab($key);
            },
            /**
             * [选项卡]点击
             * @param $activeName
             * @param $oldActiveName
             * @returns {boolean}
             */
            tabClick: function ($activeName, $oldActiveName) {

                console.log($activeName, $oldActiveName);
                $activeName = $activeName.key || $activeName;

                // 取出连接
                var link = this.tabList[$activeName];
                // [tab]信息未找到
                if (!link) return false;

                var topId = link['top_id'];

                // 顶部活动[MENU]赋值|0是顶部 - 存在的话赋值
                if (topId !== this.indexKey && topId) {
                    this.$set(this, 'topMenuIndex', topId);
                }

                // 先判断链接等于当前活动的链接就不跳转
                if (link['key'] === $oldActiveName) return false;

                this.inAnimate();
                // Todo:暂无解决办法 - 无法进行右侧消失，左侧出现的动画，只能左侧出现了。。。

                return true;
            },
            /**
             * 选项卡 操作|包括关闭、添加
             */
            handleTabsEdit: function (targetName, action) {

                if (action === 'remove') {
                    this.closeTab(targetName.toString());
                }
            },
            /**
             * 执行一次进入、退出动画
             */
            outInAnimate: function ($item) {

                var that = this;
                this.outAnimate();
                setTimeout(function () {
                    that.inAnimate();
                }, 980);
            },
            /**
             * 页面进入动画
             */
            inAnimate: function () {

                // 进入class - [fadeInLeftBig animated infinite]
                // 离开class - [fadeOutRight animated infinite]

                var contAniObj = $('.el-tabs__content');
                contAniObj.addClass('fadeInLeft animated infinite');
                // 几秒之后移除
                setTimeout(function () {
                    contAniObj.removeClass('fadeInLeft animated infinite');
                    // contAniObj.removeClass('fadeOutRight');
                }, 980);
            },
            /**
             * 页面进入动画
             */
            outAnimate: function () {

                // 进入class - [fadeInLeftBig animated infinite]
                // 离开class - [fadeOutRight animated infinite]

                var contAniObj = $('.el-tabs__content');
                contAniObj.addClass('fadeOutRight animated infinite');
                // 几秒之后移除
                var that = this;
                setTimeout(function () {
                    contAniObj.removeClass('fadeOutRight animated infinite');
                    // contAniObj.removeClass('fadeOutRight');
                }, 980);
            },
            /**
             * 菜单右击
             * @param event
             * @param key
             */
            showRightMenu: function (event, key) {

                // 如果右击的不是[tab]列表
                if (!jQuery(event['target']).hasClass('el-tabs__item')) return false;

                var pattern = new RegExp("tab\-");
                this.rightClickIndex = jQuery(event['target']).attr('id').replace(pattern, '');

                // 获取下 pos 位置
                event.preventDefault();

                this.$set(this, 'rightClickStyle', {
                    top: event.clientY + 'px',
                    left: event.clientX + 'px',
                    display: 'block'
                });
            },
            /**
             * 隐藏右击菜单
             */
            hideLeftMenu: function () {
                this.$set(this.rightClickStyle, 'display', 'none');
            },
            /**
             * 刷新当前选项卡和链接
             */
            reloadTab: function () {
                var actKey = this.tabList[this.rightClickIndex];
                if (!actKey) {

                    this.hideLeftMenu();
                    return false;
                }

                this.$set(this.tabList[this.rightClickIndex], 'url',
                    actKey['url'] + '?a=' + Math.random(0.001, 0.9));

                // 最后隐藏一下菜单
                this.hideLeftMenu();
            },
            /**
             * 浏览器新标签打开此选项卡
             */
            openTabNewTab: function () {
                var nowItem = this.tabList[this.rightClickIndex];
                window.open(nowItem['url'], '_blank').location;
                // 关闭菜单
                this.hideLeftMenu();
            },
            /**
             * 关闭其他选项卡
             */
            closeOtherTabs: function () {

                // 如果打开不是首页
                if (this.rightClickIndex !== this.indexKey) {

                    var activeTab = $w.dataNoBind(this.tabList[this.rightClickIndex]);
                    // 初始化下选项卡
                    this.initTab();
                    this.tabList[activeTab['key']] = activeTab;
                    // 活动选项卡为其[key]
                    this.activeTabIndex = activeTab['key'];
                    // 关闭菜单
                    return this.hideLeftMenu();
                }

                // ****** 下面走打开的是首页逻辑 ******
                // 初始化下选项卡
                this.initTab();
                // 关闭菜单
                this.hideLeftMenu();
            },
            /**
             * 右击菜单 - 关闭当前选项卡
             */
            closeTabLeftMenu: function () {
                // index 转下数字
                var index = this.rightClickIndex;
                this.closeTab(index);
                // 关闭菜单
                this.hideLeftMenu();

            },
            /**
             * 关闭右侧全部选项卡
             */
            closeRightAll: function () {

                var item,
                    startClose = false,
                    route = $w.dataNoBind(this.tabList[this.rightClickIndex]['url']),
                    stageTabList = $w.dataNoBind(this.tabList);

                this.initTab();
                for (var i in stageTabList) {

                    if (!stageTabList.hasOwnProperty(i)) continue;
                    item = stageTabList[i];

                    // 开关打开了，以后的[TAB]都关闭 - 不要了
                    if (startClose) break;

                    // 因为自身不能关闭 - 做一个开关监测吧
                    if (item['url'] === route) startClose = true;

                    this.$set(this.tabList, item['key'], item);
                }

                // 当前活动KEY
                this.activeTabIndex = $w.array_end(this.tabList)['key'];
                // 关闭菜单
                this.hideLeftMenu();
            },
            /**
             * 关闭左侧全部
             */
            closeLeftAll: function () {

                var item,
                    startClose = false,
                    route = $w.dataNoBind(this.tabList[this.rightClickIndex]['url']),
                    stageTabList = $w.dataNoBind(this.tabList);

                this.initTab();
                for (var i in stageTabList) {

                    if (!stageTabList.hasOwnProperty(i)) continue;
                    item = stageTabList[i];

                    // 因为自身不能关闭 - 做一个开关监测吧
                    if (item['url'] === route) startClose = true;

                    // 开关打开了，以后的[TAB]都留下
                    if (!startClose && this.indexKey !== item['key']) continue;

                    this.$set(this.tabList, item['key'], item);
                }

                // 当前活动KEY - 是右击的[key]
                this.activeTabIndex = this.rightClickIndex;
                // 关闭菜单
                this.hideLeftMenu();
            },
            /**
             * 退出登录
             */
            loginOut: function () {

                // 正在加载。。
                var loadingInstance = ELEMENT.Loading.service({
                    fullscreen: false,
                    text: '正在退出...'
                });

                var that = this;

                // 获取各模块的值
                $.ajax({
                    url: $w.getApiUrl('logout'),
                    type: 'POST',
                    data: {},
                    dataType: "json",
                    success: function (event) {

                        that.$nextTick(function () {
                            // 隐藏正在加载
                            loadingInstance.close();
                        });

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            return that.$message({
                                showClose: true,
                                type: 'error',
                                message: event.msg
                            });
                        }

                        that.$message({
                            showClose: true,
                            type: 'success',
                            message: '退出成功'
                        });
                        // 成功 加载下列表
                        return that.$nextTick(function () {
                            window.location.href = $w.getPageUrl('login');
                        });
                    },
                    error: function () {

                        that.$nextTick(function () {
                            // 隐藏正在加载
                            loadingInstance.close();
                        });

                        return that.$message({
                            showClose: true,
                            type: 'error',
                            message: '请求用频繁稍后尝试'
                        });
                    }
                });
            },
            /**
             * 清除全部缓存 展示
             */
            clearAllCache: function () {
                // 加载中...展示
                this.clearCache.showClearLoading = true;
                // 打开弹出层
                this.clearCache.showClearDialog = true;
                var that = this;
                this.$nextTick(function () {
                    var iframe = that.$refs['cacheIframe'];
                    iframe.onload = function(){
                        // 加载中...隐藏
                        that.clearCache.showClearLoading = false;
                    };
                });
            }
        },
        watch: {
            /**
             * 监测顶部菜单[Menu Index]
             */
            topMenuIndex: function ($val) {

                if (!this.topMenuList[$val]) {

                    this.$set(this, 'leftMenuList', []);
                    return false;
                }

                var mList = $w.dataNoBind(this.topMenuList[$val]['children']);
                this.$set(this, 'leftMenuList', mList);
                return false;
            }
        }
    });
};
